<template>
    <div>
        <div class="p-3">
            <t-navbar :fixed="false">
                <template #left>
                    <t-search placeholder="搜索" shape="round" />
                </template>
                <template #right>
                    <t-icon name="home" size="24px" />
                    <t-icon name="ellipsis" size="24px" />
                </template>
            </t-navbar>
        </div>

        <div>
            <div class="p-3">
                <h3>待接收</h3>
            </div>
        </div>
        <t-grid :column="0" class="grid-demo">
            <t-grid-item v-for="item in 3" :key="item" :text="`待接收${item}`" :image="imgUrl" @click="toReceive(item)" />
        </t-grid>

        <div>
            <div class="p-3">
                <h3>可转派</h3>
            </div>
        </div>
        <t-grid :column="0" class="grid-demo">
            <t-grid-item v-for="item in 10" :key="item" :text="`可转派${item}`" :image="imgUrl"
                @click="toDispatch(item)" />
        </t-grid>

        <div>
            <div class="p-3">
                <h3>待执行</h3>
            </div>
        </div>
        <t-grid :column="0" class="grid-demo">
            <t-grid-item v-for="item in 10" :key="item" :text="`待执行${item}`" :image="imgUrl" @click="toTask(item)" />
        </t-grid>

        <div>
            <div class="p-3">
                <h3>可回复</h3>
            </div>
        </div>
        <t-grid :column="0" class="grid-demo">
            <t-grid-item v-for="item in 10" :key="item" :text="`可回复${item}`" :image="imgUrl" @click="toReply(item)" />
        </t-grid>
        <div style="height:120px;"></div>
    </div>

</template>
<script lang="ts" setup>
const imgUrl = 'https://tdesign.gtimg.com/mobile/demos/example1.png';
const router = useRouter();
const toReceive = () => {
    router.push("/base/home/receive")
}

const toDispatch = () => {
    router.push("/base/home/dispatch")

}
const toTask = () => {
    router.push("/base/home/task")

}
const toReply = () => {
    router.push("/base/home/reply")

}
</script>
<style scoped lang="scss">
.grid-demo {
    margin-bottom: 16px;
}
</style>